<template>
	<sports-match-card is-swiper :data="data" @click="onClick" class="cursor-pointer">
		<template #footer>
			<sports-swiper-select class="mb-2 px-[6px]" :data="data" @click.stop></sports-swiper-select>
		</template>
	</sports-match-card>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { Match, SportsDetailTab } from '@/types'
import SportsMatchCard from '../sports-match-card/index.vue'
import SportsSwiperSelect from './sports-swiper-select.vue'
import { useSportsStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<Match>,
		required: true
	}
})

const sportsStore = useSportsStore()

const onClick = () => {
	sportsStore.setDetail({
		show: true,
		eventId: props.data.eventId,
		tab: SportsDetailTab.Market
	})
}
</script>
